<template>
  <div>
    <van-search
      v-model="word"
      show-action
      background="#f66"
      placeholder="请输入搜索关键词"
      @search="onSearch"
     
    >
      <template #action>
        <div @click="onSearch">搜索</div>
      </template>
    </van-search>
    <div class="history">
      <h3>历史记录</h3>
      <ul class="histories">
        <li v-if="!history.length">暂无搜索记录</li>
        <li 
          v-for="his in history" 
          @click="$router.push({
            path:'searchResult',
            query: {
              word: his
            }
          })"
          :key="his">
          {{his}}
        </li>
        
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      word: '',
      history: localStorage.getItem('his')?JSON.parse(localStorage.getItem('his')):[]
    }
  },
  methods: {
    onSearch () {
      // 存储 存储搜索记录
       // 去重
      this.history.unshift(this.word)
      this.history = [...new Set(this.history)]
     /*  if(this.history.indexOf(this.word) !== -1) {
        console.log(this.history.indexOf(this.word))
        this.history.splice(this.history.indexOf(this.word), 1)
        this.history.unshift(this.word)
      } */
     // 存起来
      localStorage.setItem('his', JSON.stringify(this.history))
      this.$router.push({
        path: '/searchResult',
        query: {
          word: this.word
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.histories{
  display: flex;
  flex-wrap:wrap;
  li{
    background:#f1f1f1;
    margin-top:10px;
    margin-right:10px;
    padding:0 5px;
    font-size: 16PX;
  }
}
</style>
